var imgBox = document.getElementById('imgbox');
var boxs = document.querySelectorAll(".box");
var game = document.getElementById("game");
var time = document.getElementById("time");
var kaishi1 = document.getElementById("kaishi");
var xiangqing = document.getElementById("xiangqing");
var name1 = document.getElementById("name1");
var name2 = document.getElementById("name2");
var zi = document.getElementById("zi");
var tp1 = document.getElementById("tp1");
var tp2 = document.getElementById("tp2");
var banquan1 = document.getElementById("banquan1");
var body = document.getElementsByTagName("body");
var tt, mytime = 50;
var num = 1;

function kaishi() {
	kaishi1.style.display = "none";
	xiangqing.style.display = "block";
	//打散
	//要交换元素的left，top值。
	//例如：直接a,b元素的位置
	//交换 10对元素的位置
	for(var i = 1; i < 20; i++) {
		var a = Math.floor(Math.random() * 9);
		var b = Math.floor(Math.random() * 9);

		console.info(a, b);
		if(a != b) {
			//交换boxs[a] 与boxs[b]
			//
			var _left = boxs[a].style.left;
			boxs[a].style.left = boxs[b].style.left;
			boxs[b].style.left = _left;

			var _top = boxs[a].style.top;
			boxs[a].style.top = boxs[b].style.top;
			boxs[b].style.top = _top;

			var _index = boxs[a].getAttribute("data-index");
			boxs[a].setAttribute("data-index", boxs[b].getAttribute("data-index"));
			boxs[b].setAttribute("data-index", _index);
		}
	}
	settime();
}

//			function stopDefault(e) {
//				//阻止默认浏览器动作(W3C) 
//				if(e && e.preventDefault)
//					e.preventDefault();
//				//IE中阻止函数器默认动作的方式 
//				else
//					window.event.returnValue = false;
//				return false;
//			}

function settime() {

	tt = mytime;
	showtime = setInterval(function() {
		if(tt == 0) {
			clearInterval(showtime);
			game1.style.display = "block";
			if(game.style.display == "block") {
				game1.style.display = "none";
			}

		} else {
			tt--;
			time.innerHTML = tt;
			if(tt <= 10) {
				time.style.color = "red";
			}
		}
	}, 1000);
	time.style.color = "black";
}
//失败再来一次
function loop() {
	clearInterval(showtime);
	mytime = mytime;
	game1.style.display = "none";
	var tupian2;
	for(var i = 0; i < boxs.length; i++) {
		if(tupian1 == "") {
			tupian2 = "img/1.jpg";
		} else {
			tupian2 = tupian1;
		}

		boxs[i].style.backgroundImage = "url(" + tupian2 + ")";

	}
	kaishi();
}
var tupian1 = "";

function xiayiguan() {
	clearInterval(showtime);
	mytime = mytime;
	num += 1;
	var tupian = num;
	var src = "img/" + tupian + ".jpg";
	console.log(src)
	tupian1 = src;
	for(var i = 0; i < boxs.length; i++) {
		boxs[i].style.backgroundImage = "url(" + src + ")";

	}

	game.style.display = "none";
	for(var i = 1; i < 20; i++) {
		var a = Math.floor(Math.random() * 8);
		var b = Math.floor(Math.random() * 8);

		console.info(a, b);
		if(a != b) {
			//交换boxs[a] 与boxs[b]
			//
			var _left = boxs[a].style.left;
			boxs[a].style.left = boxs[b].style.left;
			boxs[b].style.left = _left;

			var _top = boxs[a].style.top;
			boxs[a].style.top = boxs[b].style.top;
			boxs[b].style.top = _top;

			var _index = boxs[a].getAttribute("data-index");
			boxs[a].setAttribute("data-index", boxs[b].getAttribute("data-index"));
			boxs[b].setAttribute("data-index", _index);
		}
	}
	if(num == 2) {
		name1.innerHTML = "莫高窟第220窟 初唐 童子";
		name2.innerHTML = "莫高窟第220窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;
	}
	if(num == 3) {
		name1.innerHTML = "莫高窟第285窟 西魏 狩猎";
		name2.innerHTML = "莫高窟第285窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;
	}
	if(num == 4) {
		name1.innerHTML = "莫高窟第288窟 西魏 药叉";
		name2.innerHTML = "莫高窟第288窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;
	}
	if(num == 5) {
		name1.innerHTML = "莫高窟第407窟 隋 三兔莲花飞天井心";
		name2.innerHTML = "莫高窟第407窟";
		var src1 = "img/ma" + num + ".png";
		tp11.children[0].src = src1;
	}
	if(num == 6) {
		name1.innerHTML = "莫高窟第57窟 初唐 千佛";
		name2.innerHTML = "莫高窟第57窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;
	}
	if(num == 7) {
		name1.innerHTML = "莫高窟第71窟 初唐 菩萨";
		name2.innerHTML = "莫高窟第71窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;
	}
	if(num == 8) {
		name1.innerHTML = "莫高窟第85窟 中唐 树下弹筝";
		name2.innerHTML = "莫高窟第85窟";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		tp2.children[0].style.marginLeft = "-60px";
		zi.children[1].style.marginLeft = "50px";
		//无二维码
	}

	if(num == 9) {
		name1.innerHTML = "榆林窟第3窟唐僧取经";
		name2.innerHTML = "榆林窟第3窟";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		//无二维码
	}
	if(num == 10) {
		name1.innerHTML = "莫高窟第103窟 盛唐 化城喻品";
		name2.innerHTML = "莫高窟第103窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;
		tp1.children[0].style.display = "block";
		zi.children[0].style.display = "block";
		zi.children[0].style.marginRight = "95px";
		tp2.children[0].style.marginLeft = "-2px";
		zi.children[1].style.top = "-16px";
		zi.children[1].style.marginLeft = "106px";
	}
	if(num == 11) {
		name1.innerHTML = "莫高窟第103窟 盛唐 维摩诘";
		name2.innerHTML = "莫高窟第103窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;

	}
	if(num == 12) {
		name1.innerHTML = "莫高窟第156窟 晚唐 婚嫁图";
		name2.innerHTML = "莫高窟第156窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;

	}
	if(num == 13) {
		name1.innerHTML = "莫高窟第249窟 西魏 阿修罗王";
		name2.innerHTML = "莫高窟第249窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;

	}
	if(num == 14) {
		name1.innerHTML = "莫高窟第249窟 西魏 飞天";
		name2.innerHTML = "莫高窟第249窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;

	}
	if(num == 15) {
		name1.innerHTML = "莫高窟第257窟 北魏 鹿王本生";
		name2.innerHTML = "莫高窟第257窟";
		var src1 = "img/ma" + num + ".png";
		tp1.children[0].src = src1;

	}
	if(num == 16) {
		name1.innerHTML = "莫高窟第35窟 五代 龙王";
		name2.innerHTML = "莫高窟第35窟";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		tp2.children[0].style.marginLeft = "-57px";
		zi.children[1].style.left = "52px";
		zi.children[1].style.marginLeft = "0px";
		zi.children[1].style.top = "0px";
		//无二维码
	}
	if(num == 17) {
		name1.innerHTML = "莫高窟第57窟 初唐 胁侍菩萨";
		name2.innerHTML = "莫高窟第57窟";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		//无二维码
	}
	if(num == 18) {
		name1.innerHTML = "莫高窟第3窟 元 千手千眼观音";
		name2.innerHTML = "莫高窟第3窟 元";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		//无二维码
	}
	if(num == 19) {
		name1.innerHTML = "莫高窟第112窟 中唐 反弹琵琶";
		name2.innerHTML = "莫高窟第112窟";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		//无二维码
	}
	if(num == 20) {
		name1.innerHTML = "莫高窟第217窟 盛唐 建筑";
		name2.innerHTML = "莫高窟第217窟";
		tp1.children[0].style.display = "none";
		zi.children[0].style.display = "none";
		//无二维码
	}
	settime();
}

var info = {
	x: 0,
	y: 0,
	top: 0,
	left: 0
}
for(var i = 0; i < boxs.length; i++) {
	boxs[i].addEventListener("touchstart", function(e) {
		//阻止事件冒泡
		if(e && e.stopPropagation) {
			e.stopPropagation();
		} else {
			window.event.cancelBubble = true;
		}
		//阻止浏览器默认事件
		if(e && e.preventDefault) {
			e.preventDefault();
		} else {
			window.event.returnValue = false;
		}
		info.x = e.targetTouches[0].pageX;
		info.y = e.targetTouches[0].pageY;
		info.top = parseInt(this.style.top);
		info.left = parseInt(this.style.left);

		//缓存起点位置  给元素加了两个属性
		this.oriLeft = info.left;
		this.oriTop = info.top;

		//不要动画
		this.style.transition = "none";

	});
	//移动开始
	boxs[i].addEventListener("touchmove", function(e) {
		//阻止事件冒泡
		if(e && e.stopPropagation) {
			e.stopPropagation();
		} else {
			window.event.cancelBubble = true;
		}
		//阻止浏览器默认事件
		if(e && e.preventDefault) {
			e.preventDefault();
		} else {
			window.event.returnValue = false;
		}
		//newTop - newY = top - Y
		//newTop = top -y + newY
		this.style["z-index"] = 1000;
		var newTop = info.top - info.y + e.targetTouches[0].pageY;
		var newLeft = info.left - info.x + e.targetTouches[0].pageX;

		this.style.left = newLeft + "px";
		this.style.top = newTop + "px";

	});
	//移动结束
	boxs[i].addEventListener("touchend", function(e) {
		//阻止事件冒泡
		if(e && e.stopPropagation) {
			e.stopPropagation();
		} else {
			window.event.cancelBubble = true;
		}
		//阻止浏览器默认事件
		if(e && e.preventDefault) {
			e.preventDefault();
		} else {
			window.event.returnValue = false;
		}
		this.style.transition = " all .5s";
		this.style["z-index"] = 0;
		//对每 个元素进行检测
		// x > 元素的.offsetLeft && x <元素的.offsetLeft+ 100
		// y > 元素的.offsetTop && x <元素的.offsetTop+ 100
		var x = e.changedTouches[0].pageX - imgBox.offsetLeft,
			y = e.changedTouches[0].pageY - imgBox.offsetTop;
		console.info(x, y); //.targetTouches[0].pageX,e.targetTouches[0].pageY);
		//通过当前 x,y来找到应该要交换的元素是哪个？
		var obj = findSwtichBox(this, x, y);

		if(obj === this) { //不要交换元素
			//从哪里来就回到哪里去。
			obj.style.left = obj.oriLeft + "px";
			obj.style.top = obj.oriTop + "px";
		} else {
			swtichBoxs(this, obj);
			setTimeout(function() {
				if(isOk()) { //完成了
					//alert("ok");
					clearInterval(showtime);
					game.style.display = "block";
					if(num == 20) {
						console.log("恭喜你！")
						over.style.display = "block";
						game.style.display = "none";
						game1.style.display = "none";
					}
				}
			}, 600)

		}
		console.info(obj);
	});
}

function isOk() {

	// 思路：对每一个box设置一个“序号”（data-index）属性。每次交换后，都检查一下当前的元素的顺序是否与成功的序号是一致的。
	// 获取所有的元素的序号
	var str = "";
	for(var i = 0; i < boxs.length; i++) {
		str += boxs[i].getAttribute("data-index");
	}
	console.info(str);
	return str == "012345678";

}
//交换a，b元素的位置
function swtichBoxs(oriEle, targetEle) {
	//debugger;
	// var a = 10;
	// var b = 20;

	var _top = oriEle.oriTop; // var t = a;
	oriEle.style.top = targetEle.style.top; // a = b;
	targetEle.style.top = _top + "px"; // b = t;

	//把targetEle的top设置为oriEle的oriTop;
	var _left = oriEle.oriLeft; // var t = a;
	oriEle.style.left = targetEle.style.left; // a = b;
	targetEle.style.left = _left + "px"; // b = t;
	//console.info(a);
	//console.info(b);
	//
	//交换data-index值
	var _index = oriEle.getAttribute("data-index");
	oriEle.setAttribute("data-index", targetEle.getAttribute("data-index"));
	targetEle.setAttribute("data-index", _index);

}
//根据x,y的值，看当前的x，y落在box中的哪一个元素上。
function findSwtichBox(obj, x, y) {
	//自己不参与检查

	for(var i = 0; i < boxs.length; i++) {
		if(obj !== boxs[i]) {
			var t1 = x > boxs[i].offsetLeft && x < (boxs[i].offsetLeft + 100);
			var t2 = y > boxs[i].offsetTop && y < (boxs[i].offsetTop + 100);
			if(t1 && t2) {
				//console.info(boxs[i]); 找到目标
				return boxs[i];
			}
		}

	}
	return obj; //没有找到目标，即返回自己
}